<template>
	<view>
		<image src="/static/home/bg@2x.png" class="pagebg" mode=""></image>
		<view class="con">
			<u-status-bar></u-status-bar>
			<view class="con__top">
				<view class="u-flex u-flex-between u-flex-y-center">
					<view class="u-flex u-flex-items-end">
						<view class="con__top__title">
							分类
						</view>
						<image src="/static/home/cxcf.png" class="con__top__titlebg" mode=""></image>
					</view>

				</view>
			</view>
			<view class="con__title">
				锻炼类别
				<view class="u-flex u-flex-y-center con__title__more">
					查看更多
					<image src="/static/fenlei/more.png" class="con__title__more__icon" mode=""></image>
				</view>
			</view>
			<view class="con__box" v-for="(item,index) in lblist" :key="index">
				<image :src="'/static/fenlei/0'+(index+1)+'@2x.png'" class="con__box__bg" mode=""></image>
				<view class="con__box__content">
					<view class="con__box__content__title">
						{{item.name}}
					</view>
					<view class="con__box__content__tip">
						{{item.tip}}
					</view>
					<view class="con__box__content__btn">
						开始锻炼
					</view>
				</view>
				<image v-if="item.isvip" src="/static/fenlei/vip.png" class="con__box__vip" mode=""></image>
			</view>
			<view class="con__title" style="margin-top: 48rpx;">
				专注训练
				<view class="u-flex u-flex-y-center con__title__more">
					查看更多
					<image src="/static/fenlei/more.png" class="con__title__more__icon" mode=""></image>
				</view>
			</view>
			<view class="u-flex u-flex-y-center u-flex-between u-flex-wrap">
				<view class="con__box1" v-for="(item,index) in zzlist" :key="index">
					<view class="con__box1__name">
						{{item.name}}
					</view>
					<view class="con__box1__tip">
						{{item.tip}}
					</view>
					<view class="con__box__content__btn">
						开始锻炼
					</view>
					<image :src="'/static/fenlei/'+index+'.png'" class="con__box1__icon" mode=""></image>
					<image v-if="item.isvip" src="/static/fenlei/vip.png" class="con__box__vip" style="top: 12rpx;right: 2rpx;" mode=""></image>
				</view>
			</view>
			<view class="con__title" style="margin-top: 48rpx;">
				运动类型
				
			</view>
			<view class="u-flex u-flex-y-center u-flex-between">
				<view class="con__box2" v-for="(item,index) in lxlist" :key="index">
					<image :src="'/static/fenlei/l'+index+'.png'" class="con__box2__bg" mode=""></image>
					<view class="con__box2__content">
						<view class="con__box2__content__name">
							{{item.name}}
						</view>
						<view class="con__box2__content__tip">
							{{item.tip}}
						</view>
						<view class="con__box2__content__btn" :style="{color:item.c}">
							开始锻炼
						</view>
					</view>
				</view>
			</view>
			<view class="con__title" style="margin-top: 34rpx;">
				健身水平
			</view>
			<view class="con__box3">
				<view class="con__box3__item" v-for="(item,index) in splist" :key="index">
					<image :src="'/static/fenlei/sp'+(index+1)+'.png'" class="con__box3__item__bg" mode=""></image>
					<view class="con__box3__item__content">
						<view class="con__box3__item__content__name">
							{{item.name}}
						</view>
						<view class="con__box3__item__content__tip">
							{{item.tip}}
						</view>
						<view class="con__box3__item__content__btn" :style="{background:item.bgc}">
							开始
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar :current="1"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lblist:[
					{name:'简单健身锻炼',tip:'开始你的健身之旅',isvip:true},
					{name:'瘦身锻炼',tip:'燃烧你的卡路里',isvip:false},
					{name:'塑形减肥锻炼',tip:'运动减肥健身塑形',isvip:false},
					{name:'提升体能锻炼',tip:'提高健身水平和体能',isvip:false},
				],
				zzlist:[
					{name:'全身',tip:'锻炼你全身的每个部位',isvip:false},
					{name:'上半身',tip:'专注锻炼上半身的部位',isvip:true},
					{name:'中部位置',tip:'专注锻炼中部位置的部位',isvip:false},
					{name:'下半身',tip:'专注锻炼下半身的部位',isvip:false},
				],
				lxlist:[
					{name:'有氧运动',tip:'提升脉搏',c:'#F99702'},
					{name:'力量练习',tip:'增强功能',c:'#00C4A4'},
					{name:'灵活锻炼',tip:'提高灵活性',c:'#5096EC'},
				],
				splist:[
					{name:'新手',tip:'零基础锻炼',bgc:'#459A9F'},
					{name:'中等',tip:'有过健身经验',bgc:'#4987E0'},
					{name:'高级',tip:'有难度的训练',bgc:'#6363E0'},
				]
			};
		}
	}
</script>

<style lang="scss">
	.con {
		position: relative;
		padding: 40rpx 32rpx 8rpx;
		z-index: 1;
		&__title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 45rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10rpx 31rpx 8rpx;

			&__icon {
				width: 32rpx;
				height: 28rpx;
			}
		}

		&__top {
			padding: 0 8rpx;
			margin-bottom: 48rpx;

			&__title {
				font-family: SourceHanSansCN;
				font-weight: bold;
				font-size: 60rpx;
				color: #000000;
				line-height: 60rpx;
			}

			&__titlebg {
				width: 128rpx;
				height: 40rpx;
				margin-left: 12rpx;
			}

			&__ts {
				width: 32rpx;
				height: 32rpx;
			}

			&__tip {
				font-family: SourceHanSansCN;
				font-weight: 300;
				font-size: 24rpx;
				color: #333333;
				line-height: 24rpx;
				margin-top: 24rpx;
			}
		}

		&__title {
			display: flex;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			line-height: 44rpx;
			padding: 0 8rpx;

			&__more {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;

				&__icon {
					width: 10rpx;
					height: 16rpx;
					margin-left: 8rpx;
				}
			}
		}
		&__box{
			position: relative;
			width: 686rpx;
			height: 216rpx;
			background: linear-gradient( 90deg, #EFF0EF 0%, #BEC4C6 100%);
			border-radius: 28rpx;
			overflow: hidden;
			margin-top: 32rpx;
			&__bg{
				position: absolute;
				width: 686rpx;
				height: 216rpx;
				top: 0;
				left: 0;
			}
			&__content{
				position: relative;
				&__title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					line-height: 44rpx;
					padding: 28rpx 0 0 28rpx;
				}
				&__tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 34rpx;
					padding: 4rpx 0 18rpx 28rpx;
				}
				&__btn{
					width: 140rpx;
					height: 60rpx;
					background: rgba(1,126,252,0.06);
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #0074EA;
					line-height: 34rpx;
					margin-left: 28rpx;
				}
			}
			&__vip{
				height: 80rpx;
				position: absolute;
				width: 148rpx;
				top: 0;
				right: 0;
			}
		}
		&__box1{
			width: 328rpx;
			height: 308rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(217,217,217,0.5);
			border-radius: 28rpx;
			margin-top: 32rpx;
			position: relative;
			&__name{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
				padding: 28rpx 0 0 28rpx;
			}
			&__tip{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
				margin: 8rpx 0 106rpx 28rpx;
			}
			&__icon{
				position: absolute;
				width: 152rpx;
				height: 152rpx;
				bottom: 28rpx;
				right: 0;
			}
		}
		&__box2{
			width: 212rpx;
			height: 308rpx;
			box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(217,217,217,0.5);
			border-radius: 28rpx;
			overflow: hidden;
			position: relative;
			margin-top: 32rpx;
			&__bg{
				width: 212rpx;
				height: 308rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			&__content{
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				&__name{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
					padding-top: 28rpx;
				}
				&__tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
					margin-top: 8rpx;
					margin-bottom: 106rpx;
				}
				&__btn{
					width: 140rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 30rpx; 
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #F99702;
					line-height: 34rpx;
				}
			}
		}
		&__box3{
			margin-top: 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(217,217,217,0.5);
			border-radius: 28rpx;
			display: flex;
			align-items: center;
			padding: 28rpx;
			justify-content: space-between;
			&__item{
				width: 192rpx;
				height: 238rpx;
				border-radius: 16rpx;
				position: relative;
				overflow: hidden;
				&__bg{
					width: 192rpx;
					height: 238rpx;
					position: absolute;
					top: 0;
					left: 0;
				}
				&__content{
					position: relative;
					&__name{
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #333333;
						line-height: 44rpx;
						padding: 28rpx 0 8rpx 28rpx;
					}
					&__tip{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #9A9A9A;
						line-height: 34rpx;
						padding-left: 28rpx;
					}
					&__btn{
						width: 128rpx;
						height: 50rpx;
						background: #459A9F;
						border-radius: 26rpx;
						margin-left: 32rpx;
						margin-top: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}
			}
		}
	}
</style>